<template>
	<div class="repair-info">
		<div>
			<label>{{ $t('route.DeviceManager') }}</label>
			<div></div>
			<button><img /><label>{{ $t('route.Repair_application_details') }}</label></button>
		</div>
		<div>
			<div class="div-1">
				<label class="title">{{ $t('route.Head_Model') }}：</label>
				<label class="content">{{repair.noseCode}}</label>
				<label class="title">{{ $t('route.kind') }}：</label>
				<label class="content">{{repair.kind}}</label>
			</div>

			<div class="div-1">
				<label class="title">{{ $t('route.location') }}：</label>
				<label class="content">{{repair.workshop?repair.workshop:repair.store}}</label>
				<label class="title">{{ $t('route.Repair_applicant') }}：</label>
				<label class="content">{{repair.nickname}}</label>
			</div>

			<div class="div-1">
				<label class="title">{{ $t('route.Repair_time') }}：</label>
				<label class="content">{{repair.createTime}}</label>
				<label class="title">{{ $t('route.Repair_duration') }}：</label>
				<label class="content">{{formatReportDur()}}</label>
			</div>

			<div class="div-1">
				<label class="title">{{ $t('route.Urgency') }}：</label>
				<label class="content">{{formatUrgency(repair.urgency)}}</label>
				<label class="title">{{ $t('route.Fault_description') }}：</label>
				<label class="content">{{repair.problem}}</label>
			</div>

			<div class="div-1">
				<label class="title">{{ $t('route.Voice_description') }}：</label>
				<el-button @click='playClick'>{{ $t('route.Click_to_play') }}</el-button>
				<label class="title">{{ $t('route.Picture') }}：</label>
				<el-image style="width: 100px; height: 100px" :src="repair.img" :preview-src-list="[repair.img]"
					:initial-index="4" fit="cover" />
			</div>


			<div class="div-1">
				<label class="title">{{ $t('route.state') }}：</label>
				<label class="content">{{formatState(repair.state)}}</label>
				<label class="title">{{ $t('route.Processing_results') }}：</label>
				<label class="content">{{formatResult(repair.result)}}</label>
			</div>

			<div class="div-1">
				<label class="title">{{ $t('route.Maintainer') }}：</label>
				<label class="content">{{repair.repairUserName}}</label>
				<label class="title">{{ $t('route.Maintenance_duration') }}：</label>
				<label class="content">{{formatRepairDur()}}</label>
			</div>

			<div class="div-1">
				<label class="title">{{ $t('route.Whether_to_purchase_new_hardware') }}：</label>
				<label class="content">{{repair.needBuy?$t('route.yes'):$t('route.no')}}</label>
				<label class="title">{{ $t('route.Estimated_price_of_parts_yuan') }}：</label>
				<label class="content">{{repair.price}}</label>
			</div>

			<div class="div-1">
				<label class="title">{{ $t('route.Total_time') }}：</label>
				<label class="content">{{formatAllDur()}}</label>
			</div>

		</div>


	</div>
</template>

<script>
	import http from "../../js/http/http.js";
	import api from "../../js/http/api.js";
	import CommonUtils from "../../js/common/common-utils.js";
	import Constant from '../../js/common/constant.js'
	import i18n from '../../i18n/index';
	export default {
		data() {
			return {
				repair: {
					repairUserName: null
				},
				mAudio: new Audio()
			};
		},
		methods: {
			async playClick() {
				this.mAudio.src = this.repair.voice;
				await this.mAudio.play();
			},
			formatUrgency(urgency) {
				return Constant.URGENCY_LIST[urgency];
			},
			formatState(state) {
				if (state == 0) {
					return i18n.global.t('route.Processing_completed');
				} else if (state == 1) {
					return i18n.global.t('route.Not_processed');
				} else {
					return i18n.global.t('route.Processing');
				}
			},
			formatResult(result) { //0:没有异常 1:普通维修 2:大修 3报废 4:异常报警
				if (result == 0) {
					return i18n.global.t('route.normal');
				} else if (result == 1) {
					return i18n.global.t('route.General_maintenance');
				} else if (result == 2) {
					return i18n.global.t('route.Overhaul');
				} else if (result == 3) {
					return i18n.global.t('route.Scrap');
				} else if (result == 4) {
					return i18n.global.t('route.Abnormal_alarm');
				}
			},
			getRepairDevice(userId) {
				http.post(api.GET_USER_INFO, {
					userId: userId,
				}, data => {
					this.repair.repairUserName = data.data.nickname;
				})
			},
			formatReportDur() {
				var dur = 0;
				if (this.repair.repairTime) {
					dur = this.repair.repairTime - this.repair.createTime;
				} else {
					dur = new Date().getTime() - this.repair.createTime;
				}
				return CommonUtils.timeStamp(dur / 1000);
			},
			formatRepairDur() {
				if (this.repair.finishTime) {
					var dur = this.repair.finishTime - this.repair.repairTime;
					return CommonUtils.timeStamp(dur / 1000);
				}
			},
			formatAllDur() {
				var dur = 0;
				if (this.repair.finishTime) {
					dur = this.repair.finishTime - this.repair.createTime;
				} else {
					dur = new Date().getTime() - this.repair.createTime;
				}
				return CommonUtils.timeStamp(dur / 1000);
			},
		},

		created() {
			this.repair = JSON.parse(CommonUtils.getParam(this, 'repair', 'setRepair'));
			if (this.repair.repairUserId) {
				this.getRepairDevice(this.repair.repairUserId);
			}

		}
	};
</script>
<style lang="scss" scoped>
	.repair-info {
		color: #444444;
		font-size: 18px;
		padding-right: 20px;
		height: calc(100vh - 100px);
		// overflow: scroll;
		scrollbar-width: none;
		/* firefox */
		-ms-overflow-style: none;
		/* IE 10+ */
		overflow-x: hidden;
		overflow-y: auto;

		>div {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 20px;
			background-color: #ffffff;
			padding: 20px;
			border-radius: 5px;
		}

		>div:nth-of-type(1) {

			>label:nth-of-type(1) {
				font-weight: 600;
			}

			>div:nth-of-type(1) {
				width: 1px;
				background-color: #cccccc;
				height: 15px;
				margin: 0px 20px;
			}

			>button:nth-of-type(1) {
				background-image: url(../../assets/img/customer-1.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				padding: 5px 10px;
				border: 0px;
				display: flex;
				color: #ffffff;
				flex-direction: row;
				align-items: center;
				font-weight: 800;

				>img {
					margin-right: 7px;
					width: 15px;
					height: 15px;
					content: url(../../assets/img/customer-2.png);
				}

			}
		}

		>div:nth-of-type(2) {
			flex-direction: column;
			align-items: flex-start;

			.input {
				color: #000000;
			}

			.div-1 {
				display: flex;
				flex-direction: row;
				margin-top: 10px;
				align-items: center;

				.title {
					width: 160px;
					text-align: right;
				}

				.content {
					margin-left: 20px;
					width: 250px;
				}

				>button {
					margin-left: 20px;
					width: 250px;
				}
			}


		}

	}
</style>
